<template>
  <div class="mySwiper">
    <p class="title">
      <i></i>
      疫情趋势图
    </p>

    <!-- options配置项 -->
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in covidArr" :key="index">
        <img :src="item.image" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 轮播图标识 -->
    <div class="wrapper">
      <div
        class="item"
        :class="{ active: index == activeIndex }"
        v-for="(item, index) in covidArr"
        :key="index"
        @click="changeSwiper(index)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  name: "CovidSwiper",
  data() {
    const that = this;
    return {
      covidArr: [], //轮播图的数据
      activeIndex: 0,
      swiperOptions: {
        //配置swiper设置，比如自动轮播等
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: true,
        speed: 600,
        // Some Swiper option/callback...
        on: {
          slideChangeTransitionStart: function () {
            // console.log(this.activeIndex);
            that.activeIndex = this.activeIndex;
          },
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    // console.log("Current Swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
    //请求折线图数据
    this.$api.covidImage().then((res) => {
      console.log("=======", res.data);
      if (res.data.status === 200) {
        this.covidArr = res.data.result;
      }
    });
  },
  methods: {
    changeSwiper(index) {
      //   console.log("-----index", index);
      //   切换swiper显示---去哪里
      this.swiper.slideTo(index, 1000, false);
      // 点击高亮
      this.activeIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.mySwiper {
  min-height: 3rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  h2 {
    margin-top: 0.2rem;
    margin-left: 0.2rem;
    font-size: 0.4rem;
  }
  .wrapper {
    display: flex;
    font-size: 0.28rem;
    .item {
      flex: 1;
      margin: 0.06rem;
      background: #eee;
      padding: 0.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active,
    .isActive {
      background: rgb(16, 175, 181);
      color: #fff;
    }
  }
}
.mySwiper img {
  width: 100%;
}
.title {
  margin-left: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 0.35rem;
  font-weight: bold;
  line-height: 0.5rem;

  i {
    display: inline-block;
    width: 0.08rem;
    height: 0.4rem;
    margin-right: 0.06rem;
    margin-bottom: 0.03rem;
    vertical-align: middle;
    background: #4169e2;
  }
}
</style>
